# ============================================
# 知识点
# 1、jquery使用
# <script src="92.jquery类库.js"></script>
# 2、直接引入jQuery提供的CDN服务(基于网络直接请求加载)
# CDN:内容分发网络
# CDN有免费的也有收费的
# 前端免费的cdn网站:
# bootcdn
# <script
# src=”https :/ /cdn. bootcdn . net/ ajax/libs/ jquery/3.4.1/ jquery .min.js">
# </ script>
# “““你的计算机必须要有网络”““
# jQuery基本语法

# jQuery(选择器) . action()
# 秉持着jQuery的宗旨jQuery简写 $
# jQuery() === $()

# # jQuery与js代码对比
# eg:将p标签内部的文本颜色改为红色
# //原生js代码操作标签
# let pEle = document. getEl ementById( 'd1' )
# pEle.style.color = ' red
# // jQuery操作标签
# I
# $('p').css( 'color','blue')
# ============================================
# 基本选择器
# // id选择器
# $( '#d1')
# w. fn. init [div#d1]0: div#dllength: 1_ proto__ : Object(0)
# // class选择器
# $(' .c1')
# w. fn.init [p.c1， prevobject: w. fn. init(1)]0: p.cllength: 1prevobject:
# w. fn. init [document]__ proto__ : object(0)
# //标签选择器
# $( 'span'广
# w. fn. init(3) [span, span, span, prevobject: w.fn. init(1)]
# // jQuery对 象如何变成标签对象
# unde f ined
# $( '#d1')[0]
# <div id=."d1">...</div>.
# document . getElementById( 'd1')
# <div id=●"d1">...</div>●
# //标签对象如何转jQuery对象
# undef ined
# $( document . getElementById('d1'))
# w. fn. init [div#d1 ]
# ============================================
# 组合选择器
# $('div')
# w.fn. init(2) [div#d1, div.c1, prevobject: w. fn.init(1) ]
# $('div .c1')
# w. fn. init [div.c1, prevobject: w.fn. init(1)]0: div .cllength:
# 1prevobject: w. fn. init [ document]_ _proto__ : object(0)
# $( 'div #d1')
# w. fn.init [div#d1， prevobject: w.fn.init(1)]
# $('*')
# w.fn. init(19) [html, head, meta, title, meta, link, script, script,
# body, span， span, div#d1, span, p#d2， span, span, div.c1, span, span,
# prevobject: w.fn. init(1) ]
# $('#d1,.c1,p') # 并列+混用
# w. fn. init(3) [div#d1, p#d2， div.c1, prevobject: w. fn.init(1) ]
# $('div span') # 后代
# w. fn.init(3) [span, span, span, prevobject: w.fn.init(1)]
# $( 'div>span') # 儿子
# w. fn.init(2) [span, span, prevobject: w. fn.init(1) ]
# $('div+span') # 毗邻
# w. fn.init [span, prevobject: w.fn. init(1)]
# $('div-span') #弟弟
# w. fn. init(2) [span, span, prev0bject: w. fn.init(1)]
# ============================================
# 基本筛选器
# $('ul li')
# w. fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevobject:
# w. fn.init(1)] 
# $('ul li:first') # 大儿子
# w. fn.init [li, prev0bject: w. fn.init(1)]0: lilength: 1prevobject :
# w. fn. init [ document]_ proto__ : object(0)
# $('ul li:last') #小儿子
# w. fn.init [li, prevobject: W. fn.init(1) ]0: lilength: 1prevobject:
# w. fn. init [document]_ proto_ : object(0)
# $('ul li:eq(2)')   #放索引
# w. fn.init [li, prev0bject: w. fn.init(1)]0: lilength: 1prevobject :
# w. fn. init [document]_ proto_ : object(0)
# $('ul li:even') #偶数索引0包含在内
# w. fn.init(5) [li, li, li, li.c1, li#d1, prevobject: w. fn. init(1)]0: 1i1:
# 1i2: 1i3: 1i.c14: li#dllength: 5prevobject: w. fn. init
# [document]__ proto__ : 0bject(0)
# $('ul li:odd') #奇数索引
# w. fn.init(5) [li, li, li, li, li, prev0bject: w. fn.init(1)]0: li1: li2:
# li3: 1i4: lilength: 5prevObject: w. fn. init [ document] proto__ :
# object(0)
# $('ul li:gt(2)') # 大于索引
# w. fn. init(7) [li, li, li, li.c1, li, li#d1, li, prevobject :
# w. fn. init(1)]0: 1i1: 1i2: 1i3: li.c14: 1i5: li#d16: lilength:
# 7prev0bject: w. fn. init [ document]_ proto__ : object(0)
# $('ul li:1t(2)') # 小于索引
# w. fn.init(2) [li, 1i, prevobject: w.fn. init(1)]0: 1i1: lilength:
# 2prevobject: w. fn. init [ document]__ proto__ : object(0)
# $('ul li:not("#d1")') #移除满足条件的标签
# w. fn.init(9) [li, li, li，li, li, li, li.c1, li, li, prev0bject:
# w. fn. init(1) ]
# $( 'div')
# w. fn. init(2) [div, div, prevobject: w. fn.init(1)]
# $( 'div:has("p")') # 选取出包含一贫或多 个标签在内的标签
# w. fn.init [div, prevobject: w. fn.init(1)]
# ============================================
# 属性选择器
# $(' [username ]' )
# w. fn.init(3) [ input, input, p，prev0bject: w. fn.init(1) ]
# $('[username="jason"]')
# w. fn.init [ input, prev0bject: w. fn.init(1)]
# $(' p[username=”egon"]') I
# w. fn.init [p, prev0bject: w. fn.init(1)]
# ============================================
# 表单筛选器
# 表达type
# :text
# :password
# :file
# :radio
# :checkbox
# :submit
# : reset
# : button
# : ...
# $( ' input[ type= "text"]')
# w. fn. init [input, prevobject: w. fn. init(1) ]0: inputlength: 1prevobject:
# w. fn. init [ document]_ proto__ : Object(0)
# $(' input[type=" password"I') 
# w. fn. init [input, prevobject: w. fn. init(1)]
# $(':text') # 等价于上面第一-个
# w. fn. init [ input, prevobject: w. fn. init(1)]0: inputlength: 1prev0bject :
# w. fn. init [document]_ _proto_ : object(0)
# $(' :password') # 等价于上面第二个
# w. fn. init [input, prevobject: w. fn. init(1)]
# 表单对象属性
# : enabled
# : disabled
# : checked
# : selected
# "特殊情况"""
# $(' :checked' )游 它会将checked和selected都拿到
# w. fn. init(2) [ input, option, prevobject:
# w.fn.init(1)]0: input1:
# optionlength: 2prev0bject: w. fn. init [document]_ proto__ : 0bject(0)
# $(' :selected') # 它不会只拿selected
# w. fn.init [option, prevobject: w.fn.init(1) ]
# $(' input :checked') # 自己加一个限制条件
# w.fn.init [input, prevobject: w.fn.init(1)]
# ============================================
# 筛选器方法
# $('#d1' ).next() # 同级别下一个:
# w. fn. init [span, prevobject: w.fn.init(1)]0: spanlength: 1prevobject:
# w. fn. init [span#d1]__ proto__ : object(0)
# $( ' #d1' ). nextAll()
# w. fn.init(5) [span, div#d2， span, span， span.c1, prevobject:
# w.fn. init(1)]0: span1: div#d22: span3: span4: span.cllength:
# 5prevobject: w.fn.init [span#d1]__ proto__ : object(0)
# $( '#d1' ). nextUntil('.c1') # 不包括最后-一个
# w. fn. init(4) [span, div#d2， span, span, prev0bject: w.fn. init(1)]0:
# span1: div#d22: span3: spanlength: 4prev0bject: w. fn. init
# [span#d1]__ proto__ : object(0)

# $('.c1').prev() # 上一个
# w. fn. init [span, prevobject: w.fn.init(1)]0: spanlength: lprevobject:
# w. fn.init [span.c1, prev0bject: w.fn.init(1)]_ proto__ : object(0)
# $('.c1' ). prevAll( )
# w. fn. init(5) [span， span， div#d2， span， span#d1, prevobject:
# w. fn. init(1) ]
# $('.c1' ). prevUntil( ' #d2' )
# w. fn. init(2) [span, span, prevobject: w. fn.init(1) ]

# $( ' #d3' ). parent() # 第一级父标签
# w.fn.init [p， prevobject: w.fn.init(1)]0: plength: 1prevobject:
# $( ' #d3' ). parents( )  所有父标签
# w.fn.init(4) [p， div#d2， body, html, prevobject: w.fn.init(1)]
# $( ' #d3' ). parentsUntil( 'body')   
# w. fn.init(2) [p， div#d2， prevobject: w.fn.init(1)]

# $(' #d2'). children() # 儿子
# $(。#d2' ). siblings()
# #同级别上下所有
# w. fn.init(5) [span#d1, span, span, span, span.c1, prevobject:
# w. fn. init(1) ]

# 下述两两等价
# $('div span: first' ) 
# w. fn. init
# [span，prevobject: w.fn.init(1)]
# $('div span' ). first()
# w. fn. init [span, prevobject: w.fn. init(3)]0: spanlength: 1prevobject:
# w. fn.init(3) [span, span#d3， span, prevobject: w. fn.init(1)]_ proto__ :
# 0bject(0)
# I
# $('div span:last' )
# w. fn.init [span， prevobject: w.fn.init(1)]
# $('div span' ).1ast()
# w. fn. init [ span, prevobject: w.fn.init(3)]
# $('div span:not("#d3")')
# w. fn.init(2) [span, span, prevobject: w. fn.init(1)]
# $( 'div span').not( '#d3' )
# w. fn.init(2) [span， span, prev0bject: w.fn.init(3) ]
# ============================================
# 练习题
# 1.找到本页面中id是il的标签  
# $( '#il')
# 2.找到本页面中所有的h2标签
# $( 'h2')
# 3.找到本页面中所有的input 标签
# $( ' input')
# 4.找到本页面所有样式类中有c1的标签
# $('.c1')
# 5.找到本页面所有样式类中有btn-default的标签
# $(' .btn-default' )
# 6.找到本页面所有样式类中有c1的标签和所有h2标签
# $(' .c1,h2')
# 7.找到本页面所有样式类中有c1的标签和id是p3的标签
# $('.c1,#p3')
# 8.找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
# $('.c1, .btn' )
# 9.找到本页面中form标签中的所有input标签
# $( ' form'). find( 'input')
# 10.找到本页面中被包裹在label标签内的input标签
# $( ' label input' )
# 11.找到本页面中紧挨在label标签后面的input标签
# $( ' label+input')
# 12.找到本页面中id为p2的标签后面所有和它同级的li标签
# $( ' #p2-li')
# 13.找到id值为f1的标签内部的第-个input标签
# $('#f1 input:first')
# 14.找到id值为my-checkbox的标签内部最后-个input标签
# $( ' #my-checkbox input:last' )
# 15.找到id值为my-checkbox的标签内部没有被选中的那个input标签
# $( ' #my-checkbox input [ checked ! =" checked"]')
# 16.找到所有含有input标签的label标签
# $('label:has ("input")')
# ============================================